<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Form, message } from 'ant-design-vue';
import { postSalarysInitIdApi } from '@/common/apis/wages'
import type { salarysType } from '@/common/types/wages-type'
const useForm = Form.useForm;

const labelCol = { span: 6 };
const wrapperCol = { span: 14 };
const modelRef = ref<salarysType>({
    userId: 0,
    currentBasicSalary: 0,
    currentPostWage: 0,
    correctionOfBasicWages: 0,
    turnToPostWages: 0
})
const userId = ref()

const open = ref<boolean>(false)


const showModal = async (id: number) => {
    open.value = true;
    userId.value = id
};




// 点击确认
const handleOk = async () => {
    await validate()
    // 保存员工定薪数据
    await postSalarysInitIdApi({ ...modelRef.value, userId: userId.value }).then(async (res) => {
        open.value = false;
        message.success(res.data.message)
    }).catch(err => {
        message.warning(err.response.data.message)
    });
};

// 规则校验
const rulesRef = reactive({
    currentBasicSalary: [
        {
            required: true,
            message: '请输入基本工资',
        },
    ],
    currentPostWage: [
        {
            required: true,
            message: '请输入基本工资',
        },
    ],
    correctionOfBasicWages: [
        {
            required: true,
            message: '请输入基本工资',
        },
    ],
    turnToPostWages: [
        {
            required: true,
            message: '请输入基本工资',
        },
    ]
});

const { validate, validateInfos } = useForm(modelRef, rulesRef, {
    onValidate: (...args) => console.log(...args),
});


defineExpose({
    showModal
})
</script>

<template>
    <div>
        <a-modal v-model:open="open" title="定薪" @ok="handleOk">
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="当前基本工资" v-bind="validateInfos.currentBasicSalary">
                    <a-input v-model:value="modelRef.currentBasicSalary" placeholder="当前基本工资" />
                </a-form-item>
                <a-form-item label="当前岗位工资" v-bind="validateInfos.currentPostWage">
                    <a-input v-model:value="modelRef.currentPostWage" placeholder="当前岗位工资" />
                </a-form-item>
                <a-form-item label="当前工资合计">
                    <a-input :disabled="true"
                        :value="Number(modelRef.currentBasicSalary || 0) + Number(modelRef.currentPostWage || 0)" />
                </a-form-item>
                <a-form-item label="转正基本工资" v-bind="validateInfos.correctionOfBasicWages">
                    <a-input v-model:value="modelRef.correctionOfBasicWages" placeholder="转正基本工资" />
                </a-form-item>
                <a-form-item label="转正岗位工资" v-bind="validateInfos.turnToPostWages">
                    <a-input v-model:value="modelRef.turnToPostWages" placeholder="转正岗位工资" />
                </a-form-item>
                <a-form-item label="转正工资合计">
                    <a-input :disabled="true"
                        :value="Number(modelRef.correctionOfBasicWages || 0) + Number(modelRef.turnToPostWages || 0)" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>